<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>客户列表</title>
</head>
<body>
    <div layout:fragment="content">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h1>客户管理</h1>
            <a th:href="@{/customer/add}" class="btn btn-primary">新增客户</a>
        </div>
        
        <!-- 搜索表单 -->
        <div class="card mb-3">
            <div class="card-body">
                <form id="searchForm" class="d-flex justify-content-between align-items-center">
                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: 100%;">
                        <div class="form-group" style="margin-bottom: 0;">
                            <input type="text" class="form-control" placeholder="客户名称" name="name">
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <input type="text" class="form-control" placeholder="客户电话" name="phone">
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select class="form-control" name="status">
                                <option value="">客户状态</option>
                                <option value="0">潜在客户</option>
                                <option value="1">正式客户</option>
                                <option value="2">流失客户</option>
                            </select>
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <select class="form-control" name="level">
                                <option value="">客户等级</option>
                                <option value="1">1星</option>
                                <option value="2">2星</option>
                                <option value="3">3星</option>
                                <option value="4">4星</option>
                                <option value="5">5星</option>
                            </select>
                        </div>
                    </div>
                    <div style="margin-left: 1rem; display: flex;">
                        <button type="submit" class="btn btn-primary mr-2">搜索</button>
                        <button type="reset" class="btn btn-secondary">重置</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 客户列表 -->
        <div class="card">
            <div class="card-body">
                <table class="table" id="customerTable">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center;">ID</th>
                            <th style="width: 20%; text-align: left;">客户名称</th>
                            <th style="width: 15%; text-align: center;">联系电话</th>
                            <th style="width: 15%; text-align: center;">客户状态</th>
                            <th style="width: 15%; text-align: center;">客户等级</th>
                            <th style="width: 15%; text-align: center;">创建时间</th>
                            <th style="width: 15%; text-align: center;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 数据加载中... -->
                    </tbody>
                </table>
                
                <!-- 分页区域 -->
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        共 <span id="totalCount">0</span> 条记录
                    </div>
                    <ul class="pagination">
                        <!-- 分页内容将由JS动态生成 -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <th:block layout:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // 定义表格列
                const columns = [
                    { field: 'id' },
                    { field: 'name' },
                    { field: 'phone' },
                    { 
                        field: 'status',
                        render: function(value) {
                            if (value === 0) return '<span class="badge badge-warning">潜在客户</span>';
                            if (value === 1) return '<span class="badge badge-success">正式客户</span>';
                            if (value === 2) return '<span class="badge badge-secondary">流失客户</span>';
                            return '';
                        }
                    },
                    { 
                        field: 'level',
                        render: function(value) {
                            let stars = '';
                            for (let i = 0; i < value; i++) {
                                stars += '⭐';
                            }
                            return stars;
                        }
                    },
                    { 
                        field: 'createTime',
                        render: function(value) {
                            if (!value) return '';
                            const date = new Date(value);
                            return date.toLocaleString();
                        }
                    }
                ];
                
                // 加载分页数据
                loadPageData('/crm/api/customer/list', 'customerTable', columns);
                
                // 初始化删除确认
                document.addEventListener('click', function(e) {
                    if (e.target && e.target.classList.contains('btn-delete')) {
                        e.preventDefault();
                        if (confirm('确定要删除此客户吗？此操作不可恢复。')) {
                            const url = e.target.getAttribute('data-url');
                            deleteResource(url);
                        }
                    }
                });
            });
        </script>
    </th:block>
</body>
</html> 